<template>
	<div>
		<div class="wrap">
			<div class="container">
				<div class="step">
					<router-link to="/holdall"><span class="active">工具箱</span></router-link>
					&nbsp;<span>/</span>&nbsp;
					<router-link to="/high_input"><span>高分起名</span></router-link>
				</div>
				<div class="top-box box">
					<el-row>
						<el-col :xl="3" :lg="3" :md="3" :sm="6" :xs="24">
							<div class="avatar-box">
								<img v-if="nameParams.sex == 1" src="@/assets/images/classicName/boy.png" alt="" />
								<img v-else-if="nameParams.sex == 0" src="@/assets/images/classicName/girl.png" alt="" />
								<img v-else src="@/assets/images/classicName/weizhi.png" alt="" />
							</div>
						</el-col>
						<el-col :xl="7" :lg="7" :md="7" :sm="9" :xs="24" class="item-box">
							<div class="item">
								<span class="left">
									姓氏：
								</span>
								<span class="right">
									{{ nameParams.firstName }}
								</span>
							</div>
							<div class="item">
								<span class="left">
									出生日期-公历：
								</span>
								<span class="right">
									{{ nameParams.birthday }}
								</span>
							</div>
							<div class="item">
								<span class="left">
									生辰八字：
								</span>
								<span class="right">
									{{ nameInfo.bazi }}
								</span>
							</div>
							<div class="item">
								<span class="left">
									八字五行个数：
								</span>
								<span class="right" v-if="nameInfo">
									金{{ nameInfo.wxCount.jin || 0 }}个&nbsp;
									木{{ nameInfo.wxCount.mu || 0 }}个&nbsp;
									水{{ nameInfo.wxCount.shui || 0 }}个&nbsp;
									火{{ nameInfo.wxCount.huo || 0 }}个&nbsp;
									土{{ nameInfo.wxCount.tu || 0 }}个
								</span>
							</div>
						</el-col>

						<el-col :xl="7" :lg="7" :md="7" :sm="9" :xs="24" class="item-box">
							<div class="item">
								<span class="left">
									性别：
								</span>
								<span class="right">
									{{ computeSex }}
								</span>
							</div>
							<div class="item">
								<span class="left">
									出生日期-农历：
								</span>
								<span class="right">
									丁酉年 腊月 二十四时
								</span>
							</div>
							<div class="item">
								<span class="left">
									五气成分指数：
								</span>
								<span class="right" v-if="nameInfo">
									金{{ nameInfo.wqCount.jin }}个&nbsp; 木{{
                                        nameInfo.wqCount.mu
                                    }}个&nbsp; 水{{
                                        nameInfo.wqCount.shui
                                    }}个&nbsp; 火{{
                                        nameInfo.wqCount.huo
                                    }}个&nbsp; 土{{ nameInfo.wqCount.tu }}个
								</span>
							</div>
						</el-col>

						<el-col :xl="7" :lg="7" :md="7" :sm="9" :xs="24" class="item-box" v-if="nameInfo">
							<div class="item">
								<span class="left">
									印墨（金）：
								</span>
								<span class="right">
									{{ nameInfo.baZiParse.coe.jinCoefficient }}
								</span>
								<span class="persent" :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .jinCoefficient + 'px'
                                    }">
								</span>
							</div>
							<div class="item">
								<span class="left">
									食伤（木）：
								</span>
								<span class="right">
									{{ nameInfo.baZiParse.coe.muCoefficient }}
								</span>
								<span class="persent" :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .muCoefficient + 'px'
                                    }">
								</span>
							</div>
							<div class="item">
								<span class="left">
									比劫（水）：
								</span>
								<span class="right">
									{{ nameInfo.baZiParse.coe.shuiCoefficient }}
								</span>
								<span class="persent" :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .shuiCoefficient + 'px'
                                    }">
								</span>
							</div>
							<div class="item">
								<span class="left">
									财墨（火）：
								</span>
								<span class="right">
									{{ nameInfo.baZiParse.coe.huoCoefficient }}
								</span>
								<span class="persent" :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .huoCoefficient + 'px'
                                    }">
								</span>
							</div>
							<div class="item">
								<span class="left">
									官杀（土）：
								</span>
								<span class="right">
									{{ nameInfo.baZiParse.coe.tuCoefficient }}
								</span>
								<span class="persent" :style="{
                                        width:
                                            nameInfo.baZiParse.coe
                                                .tuCoefficient + 'px'
                                    }">
								</span>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="c-center-box box" v-if="nameInfo">
					<div class="title">
						<span class="circle"></span>
						精准命理调整补救指导
					</div>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							命局分析
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.mjfx"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							功名富贵
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.gmfg"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							适合事业
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.hy"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							人生贵人
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.gr"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							文昌位
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.wcw"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							幸运数字
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.lucknum"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							吉祥方位
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.location"></div>
						</el-col>
					</el-row>
					<el-row class="item">
						<el-col :xl="2" :lg="2" :md="3" :sm="4" :xs="24" class="left">
							幸运色彩
						</el-col>
						<el-col :xl="22" :lg="22" :md="21" :sm="20" :xs="24" class="right">
							<div v-html="nameInfo.baZiParse.jxs"></div>
						</el-col>
					</el-row>
				</div>
				<div class="c-bottom-box box">
					<div class="title" id="recom-jump">
						<span class="circle"></span>
						精心为您准备的{{ formatRecomTotal }}个美名
					</div>
					<el-row>
						<el-col :xl="6" :lg="6" :md="8" :sm="8" :xs="12" class="item-box" v-for="(item, index) in recomName" :key="index">
							<div class="item">
								<div :class="['heart-icon-ren',{'no-heart-icon':!item.heartIcon},{'heart-icon':item.heartIcon}]" @click="check(item)"></div>
								<span class="name"><span class="xing">{{ item.xing }}</span>{{ item.ming }} <span class="score">{{item.score}}<span style="font-size: 14px;">分</span></span> </span>
								<span class="detail" @click="
                                        toNameDetail(
                                            item.xing,
                                            item.ming,
                                            item.score,
                                            item.heartIcon
                                        )
                                    ">查看详情</span>
								<span class="detail-m detail" @click="
								        toNameDetail(
								            item.xing,
								            item.ming,
								            item.score,
								            item.heartIcon
								        )
								    ">查看</span>
							</div>
						</el-col>
					</el-row>
					<div class="page-box">
						<el-pagination background layout="prev, pager, next" :total="recomTotal" :page-size="pageSize" @current-change="pageChange" :pager-count="5">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<GoTop></GoTop>
	</div>
</template>

<script>
	import banner from "@/assets/images/classicName/banner2.png";
	import GoTop from "../../components/goTop";
	export default {
		components: {GoTop},
		data() {
			return {
				recomName: [], // 推荐的姓名列表
				nameInfo: '', // 分析姓名相关的信息
				pageSize: 100,
				pageIndex: 1,
				recomTotal: 0, // 总共有多少个推荐的姓名
				nameParams: {}, // 姓名的详细信息
			}
		},
		components:{GoTop},
		created() {
			this.nameParams = this.$route.query;
			this.getNameInfo();
			this.choicenessName();
		},
		computed: {
			computeSex() {
				if (this.nameParams.sex == 1) return '男';
				else if (this.nameParams.sex == 0) return '女';
				else return '未知';
			},
			// 根据推荐的姓名个数，显示不同的格式如2000+，3000+
			formatRecomTotal() {
				if (this.recomTotal <= 1000) return this.recomTotal;
				return parseInt(this.recomTotal / 1000) * 1000 + '+';
			}
		},
		methods: {
			//点击收藏
			check(val){
				this.$ajax.post(val.heartIcon?'/util/unCollectName':'/util/collectName',{
					"xing":val.xing,
					"ming":val.ming
				}).then(res=>{
					if(res.data.code==0){
						this.$message({
							message: val.heartIcon?'收藏成功':'收藏取消',
							type: 'success'
						});
					}else {
						this.$message.error(res.data.msg);
					}
				});
				this.$set(val,'heartIcon',!val.heartIcon);
				// console.log(val);
			},
			// 生成随机字符串
			randomString(len) {
				len = len || 32;
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			// 推荐姓名
			choicenessName() {
				this.$ajax
					.post("/util/highScoreName", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						sex: this.nameParams.sex, // 0-女，1-男
						xing: this.nameParams.firstName,
						count: this.nameParams.count,
						fix: this.nameParams.fix,
						fixLocal: this.nameParams.fixLocal
					})
					.then(res => {
						if (res.data.code == 0) {
							// 调到推荐姓名盒子的顶部
							//if(this.pageIndex >= 2) location.href = location.href + "#recom-jump";
							this.recomName = res.data.data.list;
							this.recomTotal = res.data.data.total;
							for(let i=0; i<this.recomName.length; i++){
								//this.recomName[i].heartIcon=true;
								this.$set(this.recomName[i],'heartIcon',false)
							};
						} else {
							this.$message.error(res.data.msg)
						};
					});
			},
			// 姓名相关分析
			getNameInfo() {
				this.$ajax.post("/util/takeName", {
					birthday: this.nameParams.birthday,
					sex: this.nameParams.sex, // 0-女，1-男
				})
				.then(res => {
					if (res.data.code == 0) {
						this.nameInfo = res.data.data;
					} else {
						this.$message.error(res.data.msg)
					};
				});
			},
			// 用户点击推荐姓名的分页
			pageChange(page) {
				this.pageIndex = page;
				this.choicenessName();
			},
			// 查看推荐的姓名详情
			toNameDetail(firstName, lastName, score,heartIcon) {
				let link = this.$router.resolve({
					path: '/name_analysis',
					query: {
						firstName: firstName,
						lastName: lastName,
						score: score,
						heartIcon:heartIcon
					}
				});
				window.open(link.href, '_blank');
			}
		}
	}
</script>

<style scoped>
@media screen and (min-width: 0px) and (max-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/nameGrade-phone.png) no-repeat;
    background-size: 100% 120px;
    height: 240px;
    width: 100%;
    background-position: center;
  }
}
@media (min-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/nameGrade.png) no-repeat;
    height: 120px;
    background-size: 100% 120px;
    width: 100%;
    background-position: center;
  }
}
	.wrap {
		position: relative;
		background: url(../../assets/images/classicName/banner2.png) top no-repeat;
		font-size: 15px;
		background-color: rgb(241, 242, 249);
		padding-bottom: 1px;
	}

	.step {
		padding: 25px 0;
	}

	.step .active {
		color: #fff;
	}

	.step span {
		color: #ccc;
	}

	.box {
		background: #fff;
		padding: 30px;
		border-radius: 10px;
		margin-bottom: 30px;
	}

	.top-box .avatar-box {
		text-align: center;
		width: 90px;
		overflow: hidden;
		height: 90px;
	}

	.top-box .avatar-box img {
		width: 100%;
	}

	.top-box .item .left {
		color: rgb(131, 131, 131);
	}

	.top-box .item .right {
		color: rgb(61, 93, 234);
	}

	.top-box .item-box .item {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.top-box .item-box .item:first-child {
		margin-top: 0px;
	}

	.top-box .item-box .item .persent {
		height: 6px;
		width: 100px;
		display: inline-block;
		vertical-align: center;
		border-radius: 3px;
		margin-left: 10px;
		background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
	}

	.c-center-box .title,
	.c-bottom-box .title {
		color: #000;
		font-size: 18px;
		display: flex;
		font-weight: 600;
		align-items: center;
	}

	.c-center-box .title .circle,
	.c-bottom-box .title .circle {
		display: inline-block;
		border-radius: 50%;
		border: 4px solid rgb(250, 97, 102);
		width: 18px;
		margin-right: 10px;
		height: 18px;
	}

	.c-center-box .item {
		margin-top: 25px;
		line-height: 1.5;
	}

	.c-center-box .item .left {
		color: #000;
		font-weight: bold;
	}

	.c-center-box .item .right {
		color: rgb(46, 46, 46);
	}

	.c-bottom-box .item-box {
		text-align: center;
		margin-top: 20px;
	}
	.detail-m{
		display: none!important;
	}
@media screen and (max-width:450px) {
	.item-box .item{
		margin-top: 15px!important;
	}
	.page-box{
		margin-left: -18px;
		margin-right: -18px;
	}
	.detail{
		display: none!important;
	}
	.detail-m{
		display: inline-flex!important;
	}
	.box{
		padding-left: 10px;
		padding-right: 10px;
	}
	.c-bottom-box .item{
		width: 100%!important;
		padding: 0 20px!important;
	}
	
	.c-bottom-box .item .name {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		/* width: 60%!important; */
		font-size: 14px!important;
		color: rgb(61, 93, 234);
	}
	
	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 1px!important;
	}
	.c-bottom-box .item .name .score{
		background-color: #ff5f5f;
		display: inline-flex;
		width: auto!important;
		height: 15px!important;
		padding: 0 2px!important;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: #FFF;
		font-size: 12px!important;
	}
	.c-bottom-box .item .detail {
		display: inline-block;
		color: rgb(131, 131, 131);
		cursor: pointer;
		font-size: 14px;
		padding-left: 8px!important;
		border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
	}
	.heart-icon-ren{
		left: 85%!important;
	}
}

	.c-bottom-box .item {
		width: 234px;
		height: 72px;
		display: flex;
		margin: auto;
		align-items: center;
		padding: 0 20px;
		justify-content: space-between;
		background: url(../../assets/images/classicName/name_bg.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
	}

	.c-bottom-box .item .name {
		font-size: 17px;
		color: rgb(61, 93, 234);
	}

	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 6px;
	}
	.c-bottom-box .item .name .score{
		background-color: #ff5f5f;
		display: inline-flex;
		width: 50px;
		height: 20px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: #FFF;
		font-size: 16px;
	}
	.c-bottom-box .item .detail {
		display: inline-block;
		color: rgb(131, 131, 131);
		cursor: pointer;
		font-size: 14px;
		padding-left: 12px;
		border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
	}

	.c-bottom-box .item .detail:hover {
		color: rgb(61, 93, 234)
	}

	.page-box {
		text-align: center;
		margin-top: 50px;
	}
.heart-icon-ren{
	position: absolute;
	width: 33px;
	height: 33px;
	background-size: 33px 33px;
	top: -6px;
	left: 207px;
	z-index: 9999;
	background-position: 1px 0;
	background-repeat: no-repeat;
}
.no-heart-icon{
	background-image: url(../../assets/images/classicName/no_heart.png);
}
.heart-icon{
	background-image: url(../../assets/images/classicName/heart.png);
}
</style>
